/*
 * 账号信息列表
 * @Author: zfx
 * @Date: 2018-07-10 14:53:05
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-admin-sell-account-index">
		<Table
			:columns="columns"
			:loading="loading"
			:data="accountLists"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>
	</div>
</template>

<script>
import { Tag, Button } from 'iview';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight'; // 引入mixins文件
import { conversionTime } from 'src/utils/utils';

export default {
	name: 'AccountIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		accountLists: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('equipment.affiliated_store'),
					key: 'store',
					align: 'center',
					render: (h, { row }) => <div> { row.store ? row.store.name : '-' } </div>,
				},
				{
					title: this.$t('equipment.device_number'),
					key: 'account',
					align: 'center',
					render: (h, { row }) => <div> { row.account ? row.account : '-' } </div>,
				},
				{
					title: this.$t('equipment.account_uuid'),
					key: 'uuid',
					align: 'center',
					render: (h, { row }) => <div> { row.uuid || '-' } </div>,

				},
				{
					title: this.$t('equipment.type'),
					key: 'type',
					align: 'center',
					width: 180,
					render: (h, { row }) => {
						let tags = this.$t('common.none');
						if (Array.isArray(row.skin_detectors) && row.skin_detectors.length > 0) {
							tags = row.skin_detectors.map(tag => <Tag type="border">{ tag.type }</Tag>);
						}
						return (<div>{ tags }</div>);
					},
				},
				{
					title: this.$t('equipment.equipment_opening_time'),
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('-')}</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (
								<div>
									<div>{day}</div>
									<div>{time}</div>
								</div>
							);
						}
						return date;
					},

				},
				{
					title: this.$t('equipment.last_login_time'),
					key: 'last_login_at ',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('-')}</div>;
						if (row.last_login_at) {
							const [day, time] = row.last_login_at.split(' ');
							date = (
								<div>
									<div>{day}</div>
									<div>{time}</div>
								</div>
							);
						}
						return date;
					},
				},
				{
					title: this.$t('equipment.location'),
					key: 'location',
					align: 'center',
					width: 240,
					render: (h, { row }) => <div> { row.location || '-' } </div>,

				},
				{
					title: this.$t('equipment.using_total_time'),
					key: 'alive_seconds ',
					align: 'center',
					render: (h, { row }) => (
						<div> { row.alive_seconds !== null ? conversionTime(row.alive_seconds) : '-' } </div>
					),
				},
				{
					title: this.$t('common.state'),
					key: 'enabled',
					width: 100,
					align: 'center',
					render: (h, { row }) => (row.enabled ? <div style="color: green;"> { this.$t('equipment.using') } </div> : <div style="color: red;"> { this.$t('equipment.disable') } </div>),
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 100,
					render: (h, { row }) => (
						<div>
							<Button size="small" on-click={() => { this.$emit('show', row); }} type="primary">
								{this.$t('common.edit')}
							</Button>
						</div>
					),
				},

			],
		};
	},
};
</script>
